<template>
  <div class="good">
    <span class="price_title">好价 </span
    ><span class="p_t">全网电商优惠精选</span>
    <div class="adv">
      <ul>
        <li v-for="li in list" @click="gdpClick">
          <div class="adv_img">
            <img :src="'https://images.weserv.nl/?url=' + li.focus_pic_url" />
          </div>
          <div class="adv_content">
            <h1>
              <!-- <span class="na">EPIC</span> -->
              <span class="adv_title"
                ><span class="tips" v-if="li.top_tag">{{ li.top_tag }}</span
                >{{ li.title }}</span
              >
            </h1>
            <p class="adv_pri">
              <span class="p_n">{{ li.subtitle }}</span>
            </p>
            <p class="adv_dec">
              <span class="d_1">{{ li.mall_name }}</span>
              <span class="d_2"
                ><i class="iconfont">&#xe667;</i> {{ li.comment_count }}</span
              >
              <span class="d_3">值{{ li.worthy_rate }}</span>
            </p>
          </div>
        </li>
      </ul>
      <More></More>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import More from "./More";
export default {
  components: {
    More,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async loadData() {
      let res = await axios.get("/wxapp/zdmapp/homepage_body");
      let source = res.data.data.haojia;
      this.list = source;
      // console.log(this.list);
    },
    gdpClick() {
      this.$router.push("/good_desc");
    },
  },
  async mounted() {
    await this.loadData();
  },
};
</script>

<style lang='stylus' scoped>
@import '../assets/border.styl'
@import '../assets/ellipsis.styl'
.good
  background-color #fff
  margin 0 0.1rem 0
  border-radius 10px
  padding 0.1rem 0.06rem
  .price_title
    font-size 0.2rem
    line-height 1
  .p_t
    overflow hidden
    font-size 0.1rem
    color #999
    line-height 1
  .adv
    ul
      height 4.4rem
      overflow hidden
      li
        cursor pointer
        display flex
        margin-top 0.15rem
        width 100%
        img
          width 1.3rem
          height 1.3rem
          border-radius 0.1rem
        .adv_content
          display flex
          flex-direction column
          justify-content space-between
          width 100%
          margin-left 0.15rem
          .adv_title
            ellipsis(100%, 2)
          .adv_pri
            ellipsis(100%)
            font-size 0.15rem
            color #e62828
            .p_n
              display block
              font-weight bold
              margin-top 0.09rem
          .adv_dec
            display flex
            justify-content space-between
            color #999
            font-size 0.12rem
            .d_1, .d_2, .d_3
              display inline-block
              height 0.21rem
            i
              font-size 0.14rem
            .d_1
              margin-right 0.6rem
            .d_2
              margin-right 0.1rem
          .na
            font-weight bold
          h1
            font-weight 500
        .tips
          font-size 0.1rem
          font-weight normal
          color #e62828
          width 0.45rem
          height 0.2rem
          text-align center
          line-height 0.2rem
          background-color #ffedeb
          margin-right 5px
</style>